<template>
  <div class="container">
    <el-form
        ref="registerForm"
        :rules="rules"
        :model="registerForm"
        style="width: 500px"
    >
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="registerForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
        <el-input
            type="password"
            v-model="registerForm.password"
            autocomplete="off"
            prop="password"
        ></el-input>
      </el-form-item>
      <el-form-item
          label="确认密码"
          prop="checkPass"
          :label-width="formLabelWidth"
      >
        <el-input
            type="password"
            v-model="registerForm.checkPass"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code" :label-width="formLabelWidth">
        <el-input
            prop="code"
            v-model="registerForm.code"
            auto-complete="off"
            style="width: 63%"
        >
          <!-- @keyup.enter.native="handleLogin" -->
          <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
          />
        </el-input>
        <div class="login-code" style="width: 33%; height: 38px; float: right">
          <img
              :src="codeUrl"
              style="cursor: pointer; vertical-align: middle; height: 38px"
              @click="getCode"
              class="login-code-img"
              alt="1"
          />
        </div>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="userRegister('registerForm')"
        >注 册
        </el-button
        >
        <el-button @click="resetForm('registerForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'Register',
  data() {
    //验证规则
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeIndex: "1",

      //图片
      codeUrl: "",

      //注册表单
      registerForm: {
        username: "",
        password: "",
        checkPass: "",
        code: "",
        uuid: "",
      },

      formLabelWidth: "120px",

      //表单验证规则
      rules: {
        password: [{validator: validatePass, trigger: "blur"}],
        checkPass: [{validator: validatePass2, trigger: "blur"}],
        code: [{validator: checkCode, trigger: "blur"}],
      },

      // 查询参数
      cityId: null,
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    // 点击完成注册
    async userRegister(formName) {

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let flag = await this.$store.dispatch(
              "user/userRegister",
              this.registerForm
          );

          // console.log("flag :>> ", flag);
          if (flag.code == 200) {
            this.$message({
              showClose: true,
              message: flag.msg,
              type: "success",
              offset: "70",
            });

            //注册成功进行路由的跳转
            this.$router.push("/login");
          } else {
            this.$message({
              showClose: true,
              message: flag.msg || "登录失败",
              type: "error",
              offset: "70",
            });
            this.getCode();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },


    //重置表格
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //获取验证码
    async getCode() {
      await this.$store.dispatch("user/getCodeImg");
      this.codeUrl = "data:image/gif;base64," + this.codeImgData.img;
      this.registerForm.uuid = this.codeImgData.uuid;
    },
  },
  computed: {
    //获取图片
    ...mapState("user", ["codeImgData"]),
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;

  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  height: inherit;
  background-color: #fff;
}
</style>